<template>
  <div class="app-container">
    <div class="head-container">
      <!--搜索框-->
      <el-form :inline="true">
         <el-form-item>
            <el-button type="primary" @click="dialogFormVisible = true" v-permission="['sys:menu:save']">新增</el-button>
         </el-form-item>
      </el-form>
    </div>
    <el-table 
      ref="table"  
      :data="data" 
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      stripe
      default-expand-all
      style="width: 100%;"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="perms" label="权限编码" />
      <el-table-column prop="icon" label="图标" />
      <el-table-column prop="type" label="类型">
        <template #default="scope">
            <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
            <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="菜单URL" />
      <el-table-column prop="component" label="菜单组件" />
      <el-table-column prop="orderNum" label="排序号" />
      <el-table-column prop="statu" label="状态">
        <template #default="scope">
            <el-tag v-if="scope.row.statu === 0" size="small" type="danger">禁用</el-tag>
            <el-tag v-else-if="scope.row.statu === 1" size="small" type="success">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="statu" label="操作" width="220">
        <template #default="scope">
          <el-button size="small" type="primary" @click="editHandle(scope.row.id)" v-permission="['sys:menu:update']">编辑</el-button>
          <el-popconfirm title="确定要删除这条记录吗？" @confirm="delHandle(scope.row.id)">
            <template #reference>
              <el-button 
                type="danger"
                icon="el-icon-delete"
                size="small"
                v-permission="['sys:menu:delete']"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--新增/编辑-->
    <el-dialog title="菜单信息" v-model="dialogFormVisible" width="600px">
      <el-form :model="editForm" :rules="editFormRules" ref="ruleFormRef">
        <el-form-item label="上级菜单" prop="parentId" label-width="100px">
          <el-select v-model="editForm.parentId" placeholder="请选择上级菜单">
            <template v-for="item in data" :key="item">
              <el-option :label="item.name" :value="item.id" />
              <template v-for="child in item.children" :key="child.id">
                  <el-option :label="child.name"  :value="child.id">
                    <span>{{ '- ' + child.name }}</span>
                  </el-option>
              </template>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name" label-width="100px">
          <el-input v-model="editForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限编码" prop="perms" label-width="100px">
            <el-input v-model="editForm.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon" label-width="100px">
            <el-input v-model="editForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单URL" prop="path" label-width="100px">
            <el-input v-model="editForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单组件" prop="component" label-width="100px">
            <el-input v-model="editForm.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" label-width="100px">
            <el-radio-group v-model="editForm.type">
              <el-radio :label=0>目录</el-radio>
              <el-radio :label=1>菜单</el-radio>
              <el-radio :label=2>按钮</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="statu" label-width="100px">
            <el-radio-group v-model="editForm.statu">
              <el-radio :label=0>禁用</el-radio>
              <el-radio :label=1>正常</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排序号" prop="orderNum" label-width="100px">
            <el-input-number v-model="editForm.orderNum" :min="1" label="排序号">1</el-input-number>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取 消</el-button>
        <el-button type="primary" @click="submitEditForm(ruleFormRef)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { menulist, add, edit, info, del } from "@/api/system/menu"
import { ElMessage, FormInstance } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const dialogFormVisible = ref(false)
const editForm = ref({} as MeanVo);
const editFormRules = reactive({
    parentId: [
      {required: true, message: '请选择上级菜单', trigger: 'blur'}
    ],
    name: [
      {required: true, message: '请输入名称', trigger: 'blur'}
    ],
    perms: [
      {required: true, message: '请输入权限编码', trigger: 'blur'}
    ],
    type: [
      {required: true, message: '请选择状态', trigger: 'blur'}
    ],
    orderNum: [
      {required: true, message: '请填入排序号', trigger: 'blur'}
    ],
    statu: [
      {required: true, message: '请选择状态', trigger: 'blur'}
    ]
})
const editHandle = (id: string) => {
  info(id).then(res => {
    console.log(res.data)
    editForm.value = res.data
    dialogFormVisible.value = true
  })
}
const delHandle = async (id: string) => {
  try {
    await del(id)
    getMenuTree()
    ElMessage.success('删除成功')
  } catch (error) {
    console.log(error)
  }
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}
const submitEditForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        editForm.value.id ? await edit(editForm.value) : add(editForm.value)
        ElMessage.success(`${editForm.value.id? '编辑': '添加'}成功 `)
        resetForm(formEl)
        getMenuTree()
        dialogFormVisible.value = false
      } finally {
        dialogFormVisible.value = false
      }
    } else {
      console.log('error submit!', fields)
    }
  })
  
}

const data = ref([])
const getMenuTree = () => {
  menulist().then(res => {
    console.log(res)
    data.value = res.data
  })
}
onMounted(() => {
  getMenuTree()
})
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>